<template>
    <div>
      <div class="contain d-col-none d-lg-block" @mouseover = stopAutoPlay @mouseout="autoPlay">
        <div class="contain_row" ref="banner" >
            <div class="banner"  v-for="(item,index) in list" :key="index" v-show="index==active">
              <img :src="item"  />
              <!-- <img src="" alt=""> -->
            </div>
            
            <div class="dots">
              <ul>
                <li v-for="(item,index) in list" :key="index" @click="clickFn(item,index)" :class="index==active ?'act':''"></li>
              </ul>
            </div>
            <div class="arrow">
              <div class="last" @click="lastFn">
                <div class="prvx prvx_last">
                  <img src="@static/prxv.png" alt="">
                </div>
              </div>
              <div class="next" @click="nextFn">
                <div class="prvx ">
                  <img src="@static/prxv.png" alt="">
                </div>
              </div>
            </div>
        </div>
        
        
          
        

          <!-- <div class="button button2" @click="prevSlideClick">上一张</div>
          <div class="button" @click="nextSlideClick">下一张</div>
          <div class="button" @click="slideToClick">跳到第三张</div> -->
      </div>
      <div class="hello d-col-block d-lg-none">
            <Swiper ref="swiper" class="Swiper"  v-if="list.length>0">
                <Slide class="Slide" v-for="(item,index) in list" :key=index>
                    <img :src="item" />
                </Slide>
            </Swiper>
      </div>
    </div>
</template>

<script>
import { Swiper, Slide } from 'vue-swiper-component'

export default {

  name: "HomeBanner",
  // timer:'',
  // created:{
  //   autoPlay(){
  //     this.timer = setInterval(this.play,3000)
  //   },
  // },
  data() {
    return {
      active:0,
      timer:0,
      list:[
        require("@static/banner01.png"),
        require("@static/banner02.png"),
        require("@static/banner03.png"),
      ]
    }
  },
  methods:{
    autoPlay(){
      this.stopAutoPlay()
      this.timer = setInterval(this.nextFn,3000)
    },
    // play(){
    //   this.active++;
    //   if(this.active == this.list.length){
    //     this.active = 0
    //   }
    // },
    clickFn(item,index){
      this.active = index
    },
    // 停止轮播
    stopAutoPlay(){
        clearInterval(this.timer)
    },
    autoPlayStart(){
      this.autoPlay()
    },
    lastFn(){
      this.stopAutoPlay()
      // console.log(this.index)
      if (this.active > 0) {
        this.active--
      } else {
        this.active = 2
      }
      this.autoPlay()
    },
    nextFn(){
      this.stopAutoPlay()
      // console.log(this.index)
      if (this.active < 2) {
        this.active++
      } else {
        this.active = 0
      }
      this.autoPlay()
    },
    prevSlideClick() {
        this.$refs.swiper.prevSlide()
    },
    nextSlideClick() {
        this.$refs.swiper.nextSlide()
    },
    slideToClick() {
        this.$refs.swiper.slideTo(2)
    },
    
  },
  mounted(){
    this.autoPlay()
  },
  components: {
      Swiper,
      Slide
  },
  

}

// export default {
//         data() {
//             return {
//                 list: [
//                     require("@static/banner01.png"),
//                     'require("@static/banner02.png")',
//                     'require("@static/banner03.png")',
//                 ]
//             }
//         },
//         
//         methods: {
//             getNum(i) {
//                 this.$toast(`==当前滑到了第${i}个`, 400);
//             },
//             
//             lastFn(){

//             }
//         }
//     }

</script>


<style scoped lang="stylus">

@media (min-width: 300px) {
    .hello {
      width: 90% !important
      height:200px !important
      margin: 0 5% !important
      // padding-right:15px !important
      // padding-left:30px !important
      .Swiper{
        height:200px !important
        .Slide{
          width: 100% !important
          height:200px !important
          // padding-right:0px !important
          img{
            width:100%
            height:200px
          }
        }
      }
    }
  
}

/*lg*/
@media (min-width: 992px) {
    .hello {
      width: 100% !important
      height:400px !important
      margin: 0 !important
      
      // padding-right:15px !important
      // padding-left:30px !important
      .Swiper{
        height:400px !important
        .Slide{
          width: 100% !important
          height:400px !important
          // padding-right:0px !important
          img{
            width:100%
            height:100%
          }
        }
      }
    }
}

.contain
  .contain_row
      position:relative;
      width: 100%;
      height: 483px;
      z-index: 100;
      // cursor:pointer
      .banner
        height: 483px;
        img  
          width:100%
          height:100%
      .dots 
        position: absolute;
        bottom: 15px;
        left: 0;
        right: 0;
        color: #fff;
        text-align: center;
        li
          display:inline-block;
          background-color: #A3ADF6
          border-radius: 50%;
          margin:2px 20px;
          &:after
              content:""
              display:block
              width:16px
              height:16px
              border-radius:50%
          &:hover
              box-shadow:0 0 10px rgba(0,0,0,.8) 
        .act
            background-color:#6172EF
      .arrow
          z-index:1000
          width:1500px
          position:absolute
          top:50%
          left:50%
          transform:translate(-50%,-50%)
          z-index:2
          display:flex
          justify-content:space-between
          .prvx
              width:50px
              line-height:100px
              cursor:pointer
              img
                width:100%
          .last
            width:50px
            height:100px
            background:rgba(255, 255, 255,.5)
            .prvx_last
              transform:rotate(180deg)
          .next
            width:50px
            height:100px
            background:rgba(255, 255, 255,.5)
              
        
      






.hello {
      width: 100% 
      height:400px 
      margin: 0 
      position:relative
      z-index:1
      
      // padding-right:15px 
      // padding-left:30px 
      .Swiper{
        height:400px 
        .Slide{
          width: 100% 
          height:400px 
          // padding-right:0px 
          img{
            width:100%
            height:100%
          }
        }
      }
      .arrow{
        width:1200px
        
        position:absolute
        top:50%
        left:50%
        transform:translate(-50%,-50%)
        z-index:2
        display:flex
        justify-content:space-between
        .prvx{
            width:50px
            line-height:100px
            img{
              width:100%
            }
          }
        .last{
          width:50px
          height:100px
          background:rgba(255, 255, 255,.5)
          .prvx_last{
            transform:rotate(180deg)
          }
          
        }
        .next{
          width:50px
          height:100px
          background:rgba(255, 255, 255,.5)
          .prvx_last{
          }
        }
      }
    }



.button {
    margin-top: 30px;
    position: relative;
    display: block;
    margin-left: auto;
    margin-right: auto;
    padding-left: 14px;
    padding-right: 14px;
    box-sizing: border-box;
    font-size: 18px;
    text-align: center;
    text-decoration: none;
    color: #ffffff;
    line-height: 2.33333333;
    border-radius: 5px;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    overflow: hidden;
    border-width: 0;
    width: 50%;
    padding: 0 30px 0 30px;
    outline: 0;
    -webkit-appearance: none;
    background-color: #26a2ff;
}

.button:active {
    opacity: 0.5;
    color: #333;
    }

    .button2 {
        margin-top: 100px;
    }



</style>
